<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>考勤群组信息</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../css/bootstrap.css">
<script type="text/javascript" src="../../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../../js/jquery.serializejson.js"></script>
<script type="text/javascript" src="../../js/bootstrap.js"></script>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/examinecomponents.js"></script>
<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
<script type="text/javascript" src="../../layui/layui.all.js"></script>
</head>
<body>
	<div class="container" id="container">
		<div >
			<form id="form" class="form-inline">
                <div class="form-group col-lg-4" >喜喜</div>
                <div class="form-group col-lg-4" ></div>
                <div class="form-group col-lg-4" ></div>
                <div class="form-group col-lg-4" ></div>
                <div class="form-group col-lg-4" ></div><div class="form-group col-lg-4" ></div>
				<div class="form-group col-lg-4" align="right" >
					<select class="form-control" v-model="example.did" id="result" name="result" lay-verify="" lay-search>
						<option selected="selected" value=0>--根据部门选择--</option>
						<option v-for="(dept,index) in depts" v-text="dept.deptName" :value="dept.deptId"></option>
					</select>
					<input @click="searchData()" value="搜索" class="layui-btn layui-btn-normal" type="button">
				</div>ij
			</form>
		</div>
		<!--使用分页组件-->
		<page :url="url" :example="example" :columns="columns"></page>
	</div>
	<script type="text/javascript">
		var _that;
		var app=new Vue({
			el:"#container",
			data:{
				example:{
					did:0,
					start:"",
					end:"",
					pageIndex:1,
					number:5,
				},//用于绑定搜索表单
				depts:[],
				message:"--根据状态选择--",
				url:"/getCheckIn",//定义分页组件内部查询的地址
				columns:[
					{text:"编号",property:"in_att_attgroup_id"},
					{text:"上午最早打卡时间",property:"in_morning_hours"},
					{text:"上午最晚打卡时间",property:"in_morning_closing_time"},
					{text:"下午最早打卡时间",property:"in_afternoon_hours"},
					{text:"下午最晚打卡时间",property:"in_afternoon_closing_time"},
					{text:"负责人",property:"emp_name"},
					{text:"考勤组名称",property:"in_checking_name"},
					{text:"操作",property:"0"},
				]//定义分页组件内部表格中的列信息
			},
			created:function(){
				_that=this;
				_that.selectDepts();
			},

			mounted:function(){
				_that=this;
				// //Layui 时间控件
				// layui.use('laydate', function() {
				//
				//
				// 	var laydate = layui.laydate;

					// 	laydate.render({
					// 		elem : '#start',
					// 		isInitValue: false,
					// 		min: '2000-01-01 00:00:00',
					// 		max: '2100-01-01 00:00:00',
					// 		done: function(dateObj){
					// 				var FullYear = dateObj.year;
					// 				var Month = dateObj.month;
					// 				var Day = dateObj.date;
					// 				var Hours = dateObj.hours;
					// 				var Minutes = dateObj.minutes;
					// 				var Seconds = dateObj.seconds;
					// 				_that.example.start= FullYear+"-"+Month+"-"+Day+" "+Hours+":"+Minutes+":"+Seconds;
					//
					// 			/* _that.example.start=value; */
					// 		   console.log("vue日期为："+_that.example.start);
					// 		}
					// 	});
					//
					// 	laydate.render({
					// 		elem : '#end',
					// 		isInitValue: false,
					// 		min: '2000-01-01 00:00:00',
					// 		max: '2100-01-01 00:00:00',
					// 	});
					//
					// });
			},

			methods:{
				searchData:function(){
					_that.example.start = $("#start").val();
					_that.example.end = $("#end").val();
					console.log("vue日期为："+_that.example.start);
					_this.selectByExample();
				},
				selectDepts:function(){
					$.ajax({
						url:"attendance/getdepts",
						type:"get",
						success:function(data){
							_that.depts=data.data;
						},

					});
				},
			}
		});


	</script>

</body>
</html>